<template>
	<van-popup
		position="top"
		:style="{ height: '70%' }"
		round
		v-model="show"
		:close-on-click-overlay="false"
	>
		<div class="container">
			<div class="main">
				<van-form>
					<van-field
						readonly
						clickable
						label="所属品牌："
						v-model="pinpai"
						placeholder=""
						@click="openShopPicker"
					>
						<template #right-icon>
							<van-icon @click="clearBrank" style="margin-left: 10px;" name="clear" />
						</template>
					</van-field>
					<van-field
						label="客服组名称:"
						v-model="search.search_content"
						placeholder="请输入....."
						clearable
					>
					</van-field>
				</van-form>
			</div>
			<div class="footer">
				<van-button size="small" type="default" @click="show = false">取消</van-button>
				<van-button size="small" type="info" @click="confirm">确认</van-button>
			</div>
		</div>
		<PopPickerSelectSearch
			ref="brandListRef"
			placeholder="请搜索品牌"
			:list="brandList"
			@onConfirmShopList="onConfirmbrandList"
		/>
	</van-popup>
</template>

<script>
import PopPickerSelectSearch from "@/views/mobile/storeReportForm/popPickerSelectSearch.vue";
export default {
	components: {
		PopPickerSelectSearch
	},
	props: ["bizRefData"],
	data() {
		return {
			show: false,
			search: {},
			pinpai: ""
		};
	},
	computed: {
		brandList() {
			return this.bizRefData?.brand?.map(item => ({
				text: item.bra_name,
				id: item.bra_id
			}));
		}
	},
	created() {},
	mouted() {},
	methods: {
		open() {
			this.show = true;
		},
		setData(data) {
			this.search = this.$TOOL.objCopy(data);
		},
		openShopPicker() {
			this.$refs.brandListRef.open();
			this.$nextTick(() => {
				const selectedIndex = this.brandList.findIndex(
					item => item.id == this.search.bra_id
				);
				this.$refs.brandListRef.setIndex(selectedIndex);
			});
		},
		onConfirmbrandList(data) {
			this.search.bra_id = data.id;
			console.log(data, "data");

			this.pinpai = data.text;
		},
		clearBrank() {
			this.search.bra_id = "";
			this.pinpai = "";
		},
		confirm() {
			this.$emit("resetSearch", this.search);
			this.show = false;
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	height: 100%;
	// padding: 20px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;

	.main {
		flex: 1;
	}

	.footer {
		height: 50px;
		display: flex;
		padding: 0px 16px;
		justify-content: space-between;
		align-items: center;
	}
}
</style>
